<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>造价指标</title>
    <link rel="stylesheet" href="./css/index.css">
    <script>
        ; (function (designWidth, maxWidth) {
            var doc = document,
                win = window,
                docEl = doc.documentElement,
                remStyle = document.createElement("style"),
                tid;

            function refreshRem() {
                var width = docEl.getBoundingClientRect().width;
                maxWidth = maxWidth || 540;
                width > maxWidth && (width = maxWidth);
                var rem = width * 100 / designWidth;
                remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
            }

            if (docEl.firstElementChild) {
                docEl.firstElementChild.appendChild(remStyle);
            } else {
                var wrap = doc.createElement("div");
                wrap.appendChild(remStyle);
                doc.write(wrap.innerHTML);
                wrap = null;
            }
            //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
            refreshRem();

            win.addEventListener("resize", function () {
                clearTimeout(tid); //防止执行两次
                tid = setTimeout(refreshRem, 300);
            }, false);

            win.addEventListener("pageshow", function (e) {
                if (e.persisted) { // 浏览器后退的时候重新计算
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, 300);
                }
            }, false);

            if (doc.readyState === "complete") {
                doc.body.style.fontSize = "16px";
            } else {
                doc.addEventListener("DOMContentLoaded", function (e) {
                    doc.body.style.fontSize = "16px";
                }, false);
            }
        })(1920, 1920);
    </script>
</head>

<body>
    <div class="header">
        <div class="w1200">
            <h1 class="fl">
                <img src="./imgs/logo.png" class="logo" alt="">
                <span>水利造价信息网</span>
            </h1>
            <div class="fr login">
                <div>
                    <span>登录</span>
                    <span class="border"></span>
                    <span>注册</span>
                </div>
                <div class="search-box">
                    <input type="text" placeholder="请输入要搜索的内容">
                    <img src="./imgs/search.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- navs -->
    <div class="navs">
        <div class="w1200">

            <div class="nav">首页</div>
            <div class="nav">文件规范</div>
            <div class="nav">造价信息</div>
            <div class="nav">造价指标</div>
            <div class="nav active">水利专题</div>
            <div class="nav">资料下载</div>
            <div class="nav">联系我们</div>
            <div class="nav">在线课程</div>
        </div>
    </div>
    <!-- banner -->
    <div class="banner">
        <img src="./imgs/shuili.png" alt="">
    </div>
    <!-- content -->
    <div class="content w1200">
        <div class="content-top">当前位置>水利专题</div>
        <div class="content-box clearfix">
            <div class="box">
                <div class="box-inner">
                    <div class="inner-left">
                        <img src="./imgs/kashi.png" alt="">
                    </div>
                    <div class="inner-right">
                        <div class="inner-right-content">
                            <div class="box-title">考试习题</div>
                            <div>EXAM</div>
                            <div>QUESTIONS</div>
                        </div>
                        <img src="./imgs/gengd.png" class="more" alt="">
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="box-inner">
                    <div class="inner-left">
                        <img src="./imgs/zonghe.png" alt="">
                    </div>
                    <div class="inner-right">
                        <div class="inner-right-content">
                            <div class="box-title">综合知识</div>
                            <div>Comprehensive</div>
                            <div>Knowledge</div>
                        </div>
                        <img src="./imgs/gengd.png" class="more" alt="">
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="box-inner">
                    <div class="inner-left">
                        <img src="./imgs/bengz.png" alt="">
                    </div>
                    <div class="inner-right">
                        <div class="inner-right-content">
                            <div class="box-title">泵站</div>
                            <div>pumping</div>
                            <div>station</div>
                        </div>
                        <img src="./imgs/gengd.png" class="more" alt="">
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="box-inner">
                    <div class="inner-left">
                        <img src="./imgs/shuizha.png" alt="">
                    </div>
                    <div class="inner-right">
                        <div class="inner-right-content">
                            <div class="box-title">水闸</div>
                            <div>Water gate</div>
                            <!-- <div>station</div> -->
                        </div>
                        <img src="./imgs/gengd.png" class="more" alt="">
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="box-inner">
                    <div class="inner-left">
                        <img src="./imgs/anq.png" alt="">
                    </div>
                    <div class="inner-right">
                        <div class="inner-right-content">
                            <div class="box-title">安全饮水</div>
                            <div>SAFE drinking</div>
                            <div>water</div>
                        </div>
                        <img src="./imgs/gengd.png" class="more" alt="">
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="box-inner">
                    <div class="inner-left">
                        <img src="./imgs/nongc.png" alt="">
                    </div>
                    <div class="inner-right">
                        <div class="inner-right-content">
                            <div class="box-title">农村水利</div>
                            <div>Rural Water</div>
                            <div>Conservancy</div>
                        </div>
                        <img src="./imgs/gengd.png" class="more" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- footer -->
    <div class="footer clearfix">
        <div class="relative w1200">
            <ul>
                <li>水利造价信息网</li>
                <li>电话：0371-86116911</li>
                <li>邮箱：553518846@qq.com</li>
                <li>地址：郑州市</li>
                <li>友情链接：
                    <a href="">郑州金控计算机软件有限公司</a>
                    <a href="">安徽水利造价信息网</a>
                    <a href="">百度统计</a>
                </li>
            </ul>
            <div class="qrcode">
                <img src="./imgs/qrcode.png" alt="">
                <div>扫一扫，立即关注</div>
            </div>
        </div>
        <ul>
    </div>
    <div class="copyright">
        <span>Copyright @ 2018 郑州金控计算机软件有限公司</span>
        <span>版权所有备案号：豫ICP备19032080号-5</span>
    </div>
</body>

</html>